<!-- 全屏切换 -->
<template>
    <div class="fullScreen">
        <span @click="fullScreen" :title="bool?'退出全屏':'点击全屏'">
            <i :class="['iconfont',bool?'icon-tuichuquanping':'icon-quanping']"></i>
        </span>
    </div>
</template>
<script lang="ts" setup>
   import screenfull from 'screenfull'
   import {ref } from "vue";
   //一个标识用来判断是否全屏
   let bool = ref(false)
   //改变全屏方法
   const fullScreen = ()=>{
     screenfull.toggle()
     bool.value = !bool.value
   }

</script>
<style scoped lang="less">
    .fullScreen:hover{
        cursor: pointer;
    }
</style>